<template>
  <div class="y-conter">
    <div class="y-biaoge">
      <h3 class="y-bold">人员考勤信息</h3>
      <div>
        <el-form :inline="true" ref="ruleForm" :model="ruleForm" class="demo-form-inline">
          <el-form-item label="单位名称：">
            <el-select v-model="ruleForm.buildCompany.company_id" >
              <el-option
                v-for="item in bottominput1"
                :key="item.name"
                :label="item.company_name"
                :value="item.company_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称：">
            <el-select v-model="ruleForm.buildEquipment.equipment_id" placeholder="全部">
              <el-option
                v-for="item in bottominput2"
                :key="item.time"
                :label="item.equipment_name"
                :value="item.equipment_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员姓名：">
            <el-input class="padding" v-model="ruleForm.buildPeople.people_name" placeholder="人员姓名"></el-input>
          </el-form-item>
          <el-form-item label="职位类型：">
            <el-select v-model="ruleForm.buildJob.job_id" placeholder="全部">
              <el-option
                v-for="item in bottominput3"
                :key="item.time"
                :label="item.job_name"
                :value="item.job_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="身份证号：">
            <el-input v-model="ruleForm.buildJob.job_id" placeholder="身份证号"></el-input>
          </el-form-item>-->
          <div class="l-kaoqing-btn">
            <el-button  type="primary" @click="search(ruleForm)">搜索</el-button>
            <el-button @click="resetForm(ruleForm)">重置</el-button>
           
            <!-- class="btn"
            class="y-btn" -->
          </div>
        </el-form>
      </div>

      <div class="y-table">
        <el-table
          :border="true"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          ref="multipleTable"
          :data="currList"
          tooltip-effect="dark"
          style="width: 98%, text-align: center "
          @selection-change="handleSelectionChange"
        >
          <!-- 复选框 -->
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column
            label="设备类型"
            prop="buildEquipmentType.equipment_type_name"
            width="100"
            hight="30px"
            align="center"
          ></el-table-column>
          <el-table-column
            label="设备名称"
            prop="buildEquipment.equipment_name"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column label="单位名称" prop="buildCompany.company_name" align="center"></el-table-column>
          <el-table-column label="人员姓名" width="100" align="center" prop="buildPeople.people_name"></el-table-column>
          <!-- <el-table-column label="人员身份证" prop="buildPeople.people_cardid" align="center"></el-table-column> -->
          <el-table-column label="职务/工种" width="100" align="center" prop="buildJob.job_name"></el-table-column>

          <el-table-column label="刷卡时间" align="center" prop="attendance_using"></el-table-column>
          <el-table-column label="状态" align="center" width="100" prop="attendance_status">
              <template slot-scope="scope">
            <span class="el-icon-success" style="color:green" v-if="scope.row.attendance_status=='1'"></span>
             <span class="el-icon-remove" style="color:yellow" v-if="scope.row.attendance_status=='0'"></span>
              <span class="el-icon-error" style="color:red" v-if="scope.row.attendance_status=='2'"></span>
            <!-- <span class="el-icon-error" style="color:red" v-else></span> -->
          </template>
          </el-table-column>
          <!-- <el-table-column label="考勤照片" align="center" width="100" prop="attendance_url"></el-table-column> -->
        </el-table>
       
      </div>
    </div>
     <!-- 分页器 -->
        <div class="y-fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            @current-change="changePage"
          ></el-pagination>
        </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      // 搜索下拉框1
      bottominput1: [],
      // 搜索下拉框2
      bottominput2: [],
      // 搜索下拉框3
      bottominput3: [],
      //搜索输入框
      ruleForm: {
        buildCompany: {
          company_id: "",
        },
        buildJob: {
          job_id: "",
        },
        buildEquipment: {
          equipment_id: "",
        },
        buildPeople: {
          people_name: "",
        },
      },
      //多选表格的复选框
      multipleSelection: [],
      // 分页
      tableData: [], //总数居
      currPage: 1, //当前页
      pageSize: 7, //每页数据量
      currList: [], //当前展示的数据数组
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  computed: {},
  methods: {
    // 分页
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
      // console.log('当前页',index);
    },
    //改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      // console.log(val);
    },

    //重置按钮
    resetForm(formName) {
      for (const key in formName) {
       formName[key]=""
      }
      // this[formName] = {};
      // this.$refs[formName].resetFields();
    },

    //表格编辑按钮
    handleEdit(index, row) {
      // console.log(index, row);
    },

    //选中复选框获取下标
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      // let ids = [];
      // this.multipleSelection.map((item) => {
      //   ids.push(item.key);
      // });
      // this.selectedIDs = ids;
      // console.log("你点击的是", this.selectedIDs);
    },

    //搜索输入
    search(ruleForm) {
      console.log(ruleForm)
      http.getBuildAttendanceList(ruleForm).then((r) => {
        console.log("结果",r);
        this.tableData = r.data;
        this.setCurrList(1);
        // this.bottominput1 = r.data;
        // this.bottominput2 = r.data;
        //  console.log(this.bottominput1)
      });
    },

    //批量删除
    del() {
      for (let s = 0; s < this.multipleSelection.length; s++) {
        for (let x = 0; x <= this.tableData.length; x++) {
          if (this.multipleSelection[s] === this.tableData[x]) {
            this.tableData.splice(x, 1);
            console.log(x, 1);
          }
        }
      }
    },
  },
  //获取数据
  mounted() {
    // axios.get("../../static/data/staff.json").then((r) => {
    //   this.tableData = r.data.staffList;
    //   console.log(this.tableData);
    //   this.setCurrList(1);
    // });
    http.getBuildAttendanceList({}).then((r) => {
      console.log(r);
      this.tableData = r.data;
      this.setCurrList(1);

      // this.bottominput2 = r.data;
      //  console.log(this.bottominput1)
    });

    // 单位名称列表  buildCompany/getCompanyList
    http.ryglpeiinput1({}).then((r) => {
      console.log(r);
      this.bottominput1 = r.data;
    });
    // 职位类型列表    buildJob/getBuildJobList
    http.input2({}).then((r) => {
      console.log(r);
      this.bottominput3 = r.data;
    });
    // 设备列表    buildEquipment/getEquipmentName
    http.getEquipmentName({}).then((r) => {
      console.log(r);
      this.bottominput2 = r.data;
    });

  },
};
</script>
<style scoped>
.l-kaoqing-btn{
  margin-top: 10px;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.y-conter {
  height: 645px;
  background-color: white;
  overflow: hidden;
  overflow-y: scroll;
  margin-top: 15px;
  position: relative;
}
.y-bold {
  font-weight: bold;
}
.y-biaoge {
  margin-top: 20px;
  margin-left: 10px;
}
.y-table {
  margin-top: 15px;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  margin-left: 5px;
}
.el-input >>> .el-input__inner {
  width: 178px;
  height: 30px;
  margin-left: 5px;
}
.el-range-editor {
  width: 160px;
  height: 30px;
  padding-left: 10px;
  margin-left: 5px;
}
.el-input >>> .el-range__icon {
  line-height: 0px;
  padding-left: 10px;
}
.el-range-editor >>> .el-input__inner {
  width: 200px;
  height: 30px;
  margin-left: 5px;
  margin-top: 10px;
}
/* .el-button {
  height: 30px;
  width: 100px;
  line-height: 0px;
} */
.el-button {
  height: 32px;
  padding: 8px 15px;
}
/* 分页器 */
.y-fenye {
  /* float: right; */
  position: absolute;
  right: 1%;
  bottom: 5px;
}
/* 搜索 */
.btn {
  width: 58px;
  text-align: center;
  padding-left: 15px;
  height: 30px;
  margin-top: 7px;
}
/* 第二层输入框 */
.el-form-item {
  margin-bottom: 2px !important;
}
/* 按钮 */
.y-btn {
  width: 60px;
  padding-left: 12px;
  text-align: center;
}
</style>